/*
 * @Author: Wxx
 * @Date: 2022-02-25 17:03:05
 * @LastEditors: Wxx
 * @LastEditTime: 2022-02-25 17:46:13
 * @Description:
 */
import React, { useEffect, useState } from "react";
import axios from "axios";
import BetterScroll from "better-scroll";
import store from "../redux/store";

export default function City(props) {
  const [city, setCity] = useState([]);
  useEffect(() => {
    axios({
      url: "https://m.maizuo.com/gateway?k=5165614",
      headers: {
        "X-Client-Info":
          '{"a":"3000","ch":"1002","v":"5.2.0","e":"1645753527187363653320705"}',
        "X-Host": "mall.film-ticket.city.list",
      },
    }).then((res) => {
      setCity(res.data.data.cities);
      new BetterScroll("#wrapper", {
        scrollY: false, // 因为scrollY默认为true，其实可以省略
        scrollX: true,
        mouseWheel: true,
        click: true,
        taps: true,
      });
    });
  }, []);
  return (
    <div id="wrapper">
      <ul>
        {city.map((item) => (
          <li
            style={{
              padding: "10px 10px",
              borderBottom: "1px solid #eee",
            }}
            key={item.cityId}
            onClick={() => {
              store.dispatch({
                type: "cityChange",
                payload: item.name,
              });
              props.history.goBack();
            }}
          >
            {item.name}
          </li>
        ))}
      </ul>
    </div>
  );
}
